<template>
  <div class="main-layout">
    <Sidebar class="sidebar" />
    <div class="main-content">
      <Topbar class="topbar" />
      <router-view class="status-panel" />
      <FooterBar class="footer-bar" />
    </div>
  </div>
</template>

<script setup lang="ts">
import Sidebar from './Sidebar.vue'
import Topbar from './Topbar.vue'
import FooterBar from './FooterBar.vue'
</script>

<style scoped>
.main-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
.sidebar {
  width: 120px;
  background: #2b4a6f;
  color: #fff;
}
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f5f6fa;
}
.topbar {
  height: 48px;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
}
.status-panel {
  flex: 1;
  overflow: auto;
  padding: 0 16px;
}
.footer-bar {
  height: 56px;
}
</style>
